<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    省份：
    <select name="" id=""></select>
    城市：
    <select name="" id=""></select>
    区/县：
    <select name="" id=""></select>
    <script src="area.js"></script>
    <script>

        // console.log(place.data); // 得到34个省
        var sel = document.querySelectorAll("select");
        var str = '';
        place.data.forEach(function (item) {
            // console.log(item);
            str += `<option value="">${item.provname}</option>`
        });
        // console.log(str);
        sel[0].innerHTML = str; // 所有省份的下拉框

        sel[0].onchange = run1;
        sel[1].onchange = run2;

        run1();
        function run1() {
            // console.log(place.data[0].city); // 18个市
            var str = '';
            var i = sel[0].selectedIndex;
            var arr = place.data[i].city;
            arr.forEach(function (item) {
                // console.log(item);
                str += `<option value="">${item.cityname}</option>`;
            });
            //  console.log(str);// 所有的市
            sel[1].innerHTML = str;
            run2()

        }
        function run2() {
            var str = '';
            var i = sel[0].selectedIndex;
            var j = sel[1].selectedIndex;
            var arr = place.data[i].city[j].dist;
          
            arr.forEach(function (item) {
                str += ` <option value="">${item}</option>`
            });
            sel[2].innerHTML = str;
        }
    </script>
</body>

</html>